<template>
  <view class="container">
    <view class="item-box">
      <view
        v-for="(item, index) in categoryList"
        :key="index"
        class="item"
        @click="lookHandle(item.id)"
      >
        <view class="title">{{ item.name }}</view>

        <view class="action-box">
          <view class="but start-study">查看更多</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import * as Api from '@/apis/shen-lun/norms-words'
import { ref } from 'vue'

const categoryList = ref<
  Array<{
    id: number
    name: string
  }>
>()
const getKgSlNormsWordsTypeList = async () => {
  const res = await Api.getKgSlNormsWordsTypeList()

  categoryList.value = res.data
}
getKgSlNormsWordsTypeList()

const lookHandle = (id: number) => {
  uni.navigateTo({
    url: `/pages/shen-lun/gui-fan-ci/category/gui-fan-ci-list?id=${id}`,
  })
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  box-sizing: border-box;
  padding: 10rpx 20rpx;

  .item-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
      width: 49%;
      height: 200rpx;
      background-color: #fff;
      margin: 20rpx 0;
      border-radius: 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .title {
        box-sizing: border-box;
        font-size: 1rem;
        font-weight: 700;
      }
    }

    .action-box {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 30rpx;

      .but {
        width: 200rpx;
        height: 75rpx;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
      }

      .start-test {
        background-color: rgba(#2979ff, 0.2);
        color: #2979ff;
      }
      .start-study {
        background-color: #2979ff;
        color: #fff;
      }
    }
  }
}
</style>
